<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style >
        body {
            border: 0;
        }

        a {
            text-decoration: none;
        }

        .el-main {
            margin: 0;
        }

        /*轮播图样式*/
        .el-menu {

        }

        .el-menu.el-menu--horizontal {
            border-bottom: solid 0;

        }

        .el-menu-demo el-menu--horizontal el-menu {
            margin: 0 auto;
            width: 1200px;
            height: 200px;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        /*  轮播图下的布局样式*/
        .el-row {
            margin-bottom: 20px;
            /*&:last-child {*/
            /*   margin-bottom: 0;*/
            /* }*/
        }

        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: red;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .el-main {
            padding: 0;
            list-style: none;
            position: relative;
        }
        .el-header{
            position: fixed ;
            z-index: 10;
            overflow: hidden;
        }
        .a_img img{
            width: 330px;
            height: 330px;
        }
        .a_img:hover img{
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body style=" margin: 0 auto;">
<div id="app">
    <el-container>
        <el-header style="background-color: black;width: 100%;height: 120px">
            <div style="height: 55px;width: 1150px;margin: 0 auto">
                <img src="imgs/logo.png" alt="" >
            </div>
            <div style="width: 1200px;margin:0 auto;">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                         style="background-color: black;"
                         background-color="#000000"
                         text-color="#ffffff"
                         menu-trigger="hover"
                         collapse-transition
                         active-text-color="#ff0000">
<!--                         >-->
                    <span style="color:red;float: left;position: relative;top: 11px;font-size: 30px;vertical-align: middle">强盛健身</span>
                    <el-menu-item index="1" style="margin-right: 40px">首页</el-menu-item>
                    <el-submenu index="2" style="margin-right: 40px">
                        <template slot="title" >健身服务</template>
                        <el-menu-item index="2-1"><a href="courseCoach.html" style="text-decoration: none;color: white">健身指导</a></el-menu-item>
                        <el-menu-item index="2-2">器械使用教程</el-menu-item>
                        <el-menu-item index="2-3" >线下课程表</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3" style="margin-right: 40px"><a href="shopping.html">健身商城</a></el-menu-item>
                    <el-submenu index="4" style="margin-right: 40px">
                        <template slot="title">个人中心</template>
                        <el-menu-item index="4-1">个人资料设置</el-menu-item>
                        <el-menu-item index="4-2">消息管理</el-menu-item>
                        <el-menu-item index="4-3">社区个人主页</el-menu-item>
                        <el-menu-item index="4-4">退出帐号</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="5" style="margin-right: 40px">健身社区</el-menu-item>
                    <el-menu-item index="6" style="margin-right: 40px;"><a href="admin.html">后端管理</a></el-menu-item>
                    <span style="color: red;float:right;font-size: 10px"><p>全国统一客服、拓展热线</p><p>400-0000-311</p></span>
                </el-menu>
            </div>
        </el-header>
        <el-main>
            <!--      轮播图-->
            <template>
                <el-carousel height="800px">
                    <el-carousel-item v-for="item in 3" :key="item">
                        <img :src="'imgs/banner/banner_'+item+'.jpg'" alt="" style="width: 100%">
                    </el-carousel-item>
                </el-carousel>
            </template>

            <!--      轮播图下文字描述-->
            <div style="background-color: red;">
                <div style="width: 1200px;text-align: center;margin: 0 auto">
                    <el-row style="margin: 0">
                        <el-col :span="8" style="border-right: 1px solid white">
                            <div class="grid-content bg-purple"
                                 style="height: 200px;border-radius: 0px;">
                                <h3 >
                                    <p style="font-size: 24px;color: white;margin-top: 0">强盛健身<span
                                            style="font-size: 18px;margin-left: 10px;color: white;margin-bottom: 0px">/ QSJS</span></p>
                                </h3>
                                <p style="font-size: 15px;color: white;text-align: left;margin-bottom: 0px">
                                    强盛健身集团有限公司QSJS，简称强盛健身集团或强盛集团，由亞力山大国际健康集团、中健健身有限公司、山东中健健身发展有限公司及投资机构共同组建......</p>
                                <!--                        <p style="font-size: 15px;color: white;margin-right: 120px">中健健身有限公司、山东中健健身发展有限公司及投资机构共同组建......</p>-->
                            </div>
                        </el-col>
                        <el-col :span="8" style="border-right: 1px solid white">
                            <div class="grid-content bg-purple"
                                 style="height: 200px;border-radius: 0px;">
                                <h3>
                                    <p style="font-size: 24px;color: white;margin-top: 0">品牌 <span
                                            style="font-size: 18px;margin-left: 10px;color: white;">/ BRAND</span></p>
                                </h3>
                                <P style="font-size: 15px;color: white">品牌成长 / 品牌布局 / 品牌战略</P>
                                <p style="font-size: 15px;color: white;margin-right: 65px">企业使命 / 品牌责任 /</p>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple" style="height: 200px;border-radius: 0px">
                                <h3>
                                    <p style="font-size: 24px;color: white;margin-top: 0">品牌活动 <span
                                            style="font-size: 18px;margin-left: 10px;color: white;">/ ACTIVITY</span>
                                    </p>
                                </h3>
                                <P style="font-size: 15px;color: white">瘦身训练营 / 暑期游泳班</P>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>


            <!--文字描述结束-->
            <!--      -->
            <div style="width: 100%">
                <div style="width: 1200px;height: 200px ;margin: 0 auto ;text-align: left;background-color: white;color: black;overflow: hidden;">
                    <h1 style="margin-top: 70px ;"> >专业团队/私人定制 Curriculum Planning</h1>
                </div>
            </div>
            <div style="width: 100%;background-color: rgb(41,41,41);height: 600px">
                <img src="imgs/planbigbg.jpg" alt="" style="height:600px;float: right;display:block">
                <div style="width: 1200px;margin: 0 auto;color: red">
                    <div style="width: 600px;text-align: left;padding-top: 90px;margin: 0 auto">
                        <h3 style="font-size: 32px">“课程规划,专业团队”</h3>
                        <span  style="font-size: 32px">TREND GROUP <br>CLASSES</span>
                        <p  style="font-size: 12px">课程体系紧跟国际潮流，时尚的莱美课程体系，与国际接轨</p>
                        <p  style="font-size: 12px">公司每年派代表参与莱美最新课程的培训，确保团课水平引领国际潮流</p>
                        <div>
                            <a style="display: inline-block;background: #e60012;color: #fff;font-size: 16px;margin-top: 40px;margin-right: 20px;width: 160px; text-align: center;padding: 7px 0;"
                               href="" title="课程查询"><i class="fa fa-search"></i>课程查询</a>

                            <a style="display: inline-block;background: #e60012;color: #fff;font-size: 16px;margin-top: 40px;margin-right: 20px;width: 160px; text-align: center;padding: 7px 0;"
                               href="courseCoach.html" title="教练列表"><i class="fa fa-search"></i>教练列表</a>
                        </div>

                    </div>
                </div>

            </div>
            <div style="width: 100%">
                <div style="width: 1200px;height: 200px ;margin: 0 auto ;text-align: left;background-color: white;color: black;overflow: hidden;">
                    <h1 style="margin-top: 65px;"> >精选好物/与你分享 Experience Center</h1>
                </div>
            </div>
            <div style="width: 100%;height: 300px;overflow: hidden">
                <div style="width: 1080px;margin: 0 auto">
                    <a class="a_img" href="">
                        <img src="imgs/manpic.jpg" alt="" style="float: left ;width: 330px;height: 330px">
                    </a>

                    <div style="float: left;background-color: red;text-align: center;font-size: 20px;width: 420px;height: 330px">
                        <h3>MENS</h3>
                        <h4>男士</h4>
                        <p>课程体系紧跟潮流</p>
                        <p>课程体系紧跟潮流</p>
                    </div>
                    <a class="a_img" href="" >
                        <img src="imgs/womanpic.jpg" alt=""
                             style="float: right ;width: 330px;height: 330px;display: inline">
                    </a>

                </div>
            </div>
            <div>
                <div style="width: 1200px;height: 200px ;margin: 0 auto ;text-align: left;background-color: white;color: black;overflow: hidden;">

                    <h1 style="margin-top: 65px;"> >一同论道/健康咨询 Health Information     <div style="float:right;display: inline">
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                                 @select="handleSelect">
                            <el-menu-item index="1"><button style="background-color: red">健康消息</button></el-menu-item>
                            <el-menu-item index="2"><button style="background-color: red">会员中心</button></el-menu-item>
                        </el-menu>
                    </div></h1>
                    <!--健康咨询导航-->
                </div>
            </div>
            <div>
                <div style="width: 1200px;margin: 0 auto">
                    <div v-if="currentIndex==1">
                        <div style="width:350px;height: 115px ;float: left;position: relative;background-color: red;margin: 10px 25px"
                             v-for="c in 6">
                            <div style="float:left;width: 125px">
                                <img src="imgs/consult/consult_1.jpg" alt="" style="height: 115px;width: 100%">
                            </div>
                            <div style="display: inline-block;float:left;padding: 10px;font-size: 12px;color: #303030; width: 56%; ">
                                <h3 style="margin-top: 0px">每天坚持跳绳会有什么变化？</h3>
                                <p>跳绳是我们比较常见的运动，在很多中小学里很早就提倡跳绳运动，</p>
                                <span class="goview">查看详细内容</span>
                            </div>
                        </div>
                    </div>
                    <div v-if="currentIndex==2">
                        <div style="width:350px;height: 115px ;float: left;position: relative;background-color: red;margin: 10px 25px"
                             v-for="c in 6">
                            <div style="float:left;width: 125px">
                                <img src="imgs/consult/consult_2.jpg" alt="" style="height: 115px;width: 100%">
                            </div>
                            <div style="display: inline-block;float:left;padding: 10px;font-size: 12px;color: #303030; width: 56%; ">

                                    <h3 style="margin-top: 0px">长期健身的人都有饮食配方</h3>
                                    <p>很多想要减肥或者健身的人因为没有效果、增肌没有方法就放弃了，</p>
                                    <span class="goview">查看详细内容</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

<!--            引入地图-->


        </el-main>
        <el-footer style="padding: 0">
            <div style="background-color: black;  color: #fff;text-align: center;padding: 10px 0">
                <p>Copyright © 北京强盛健身有限公司版权所有 </p>
                <p>涵盖20余门课程体系，致力于打造权威的健身学习平台</p>
                <p>健身网站WWW.qiangshenjianshen.cn 专注于健身技能培训</p>
            </div>
        </el-footer>
    </el-container>

</div>
</body>
<!--引入echars-->
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
<!-- import Vue before Element -->

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>

    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                currentIndex: "1",
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                v.currentIndex = key;
            }
        }
    })
</script>
</html>